<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /* ID选择器>类选择器>标签选择器         */
       /* 标签选择器     */
       h1 {
        font-size:12px;
        color:#F00;
       }
       /* 类选择器 */
       .one{
        font-size: 16px;
        color: yellowgreen;
       }
       /* ID选择器 */
       #two{
        font-size: 16px;
        color: orange;
       }

       /* 后代选择器 */
       /* 在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明
        外层的标签写在前面，内层的标签写在后面，之间用空格分隔
        标签嵌套时，内层的标签成为外层标签的后代 */
       p span{
        color:#F00;
       }

       /* 交集选择器
        由两个选择器直接连接构成，选中二者各自元素范围的交集
        第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
        选择器之间不能有空格，必须连续书写 */
        span.one{
           font-size: 12px;
           color: orange; 
        }

        /* 并集选择器
        多个选择器通过逗号连接而成
        利用并集选择器同时声明风格相同样式 */
        .one,#two{
            font-size: 12px;
            color: yellowgreen; 
        }
    </style>
</head>
<body>
    <h1>静夜思</h1>
    <p>
        <span class="one">床前明月光</span><br />
        <span id="two">疑是地上霜</span><br />
        <!-- HTML中引入CSS样式 内联样式-->
        <span style="color: #F00;">举头望明月</span><br />
        <span>低头思故乡</span><br />
    </p>
</body>
</html>